<template>
  <div class="livolobim-wrapper">
    <div class="header-bar" v-if="showTab">
      <div class="app-logo">
        LIVOLO力沃分工
      </div>
      <div class="tab-bar">
        <div :class="{'active': currentTab === 1}" @click="toTab(1, 'livolobim-task')">任务</div>
        <div :class="{'active': currentTab === 2}" @click="toTab(2, 'livolobim-project')">项目</div>
        <div :class="{'active': currentTab === 3}" @click="toTab(3, 'livolobim-module')">版块</div>
        <div :class="{'active': currentTab === 4}" @click="toTab(4, 'livolobim-statistics')">统计</div>
        <div :class="{'active': currentTab === 5}" @click="toTab(5, 'livolobim-trends')">动态</div>
      </div>
      <div class="user-bar">
        <span><img :src="user.avatar" :alt="user.realName">
        {{ user.realName }}</span>
      </div>
    </div>
    <router-view ref="component" @changeTab='toTab'></router-view>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
export default {
  data() {
    return {
      currentTab: 1,
      user: {},
      showTab: false
    }
  },
  watch: {
    $route (to, from) {
      if(to.name === 'livolobim' && from.name === 'livolobim-task') {
        let id = this.$route.query.taskId;
        this.currentTab = 1;
        this.$router.replace({ name: 'livolobim-task'})
        if(id) this.$refs.component.openTaskDetail(id)
      }else if(to.name === 'livolobim') {
        this.currentTab = 1;
        this.$router.replace({ name: 'livolobim-task' , params: {taskId: this.$route.query.taskId}})
      }
    }
  },
  mounted() {
    if (this.isPC()) {
      this.showTab = true;
      this.getDingConfig().then(config =>{
        this.dingConfig = config;
        this.dingLogin(config.corpId, () => {
          this.currentTab = 1;
          this.$router.replace({ name: 'livolobim-task' , params: {taskId: this.$route.query.taskId}})
          this.user = this.userInfo
        });
        this.run_dd_config();
      })
    } else {
      this.$router.replace({name: 'mlivolobim', params: {taskId: this.$route.query.taskId}})
    }
  },
  mixins: [dingMixin],
  methods:{
    toTab(tab, tabname) {
      this.currentTab = tab;
      if(tabname) this.$router.push({ name: tabname })
    }
  }
}
</script>

<style lang="scss" scoped>
  .livolobim-wrapper{
    height: 100%;
    background: #F5F5F5;
    overflow: hidden;
  }
  .header-bar{
    z-index: 2;
    height: 50px;
    background: #4495FF;
    position: relative;
    box-shadow: 0 3px 4px #BFCBF9;
    .app-logo{
      position: absolute;
      line-height: 50px;
      top:0;
      left:20px;
      font-size: 18px;
      font-weight: bold;
      color: #FFF;
    }
    .user-bar{
      position: absolute;
      height: 50px;
      top:0;
      right: 30px;
      padding-top: 10px;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border:1px solid #F1F5FF;
      }
      color: #FFF;
    }
    .tab-bar{
      width: 575px;
      margin: 0 auto;
      line-height: 50px;
      display:flex;
      color:#F1F5FF;
      font-size: 20px;
      text-align: center;
      >div{
        cursor: pointer;
        width: 115px;
      }
      >div.active{
        background: #4489FF;
        color:#FFF;
      }
    }
  }
</style>